<script setup>
import { defineProps } from 'vue'

const {list, department}= defineProps({
  list: Array,
  department: String
})
</script>

<template>
  <ul class="announcement-list">
    <li v-for="(item, idx) in list" :key="idx" class="announcement-item">
      <a
          class="title-link"
          :href="department
          ? `/announcement-detail/${department}/${item.id}`
          : `/announcement-detail/${item.id}`"
          target="_blank"
          rel="noopener"
      >
        {{ item.title }}
      </a>
      <span class="date">{{ item.date }}</span>
    </li>
  </ul>
</template>

<style scoped>
.announcement-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.announcement-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  font-size: 14px;
}

.date {
  margin-left: auto;
  color: #909399;
}

.title-link {
  color: #222; /* 正常黑色 */
  text-decoration: none; /* 移除下划线 */
  cursor: pointer;
  margin-right: 16px;
  font-weight: normal; /* 正常黑体 */
  transition: color 0.2s; /* 悬停时颜色变化 */
}

.title-link:hover {
  color: #409eff; /* 鼠标悬停时改变颜色 */
  text-decoration: underline; /* 悬停时添加下划线 */
}
</style>

